<template>
	<view class="container">
		<view class="header">
			<picker class="picker-text" mode="date" @change="onDateChange" style="margin-right: 15rpx">
				📅{{ selectedDate }}
			</picker>
			<text class="header-text" style="font-weight: 550; font-size: 31rpx;">状态:</text>

			<picker class="picker-text" mode="selector" :range="statusOptions" @change="onStatusChange">
				{{ status==="全部"? "全  部": status }}
			</picker>
			<text class="header-text" style="font-weight: 550; font-size: 31rpx; margin-left: 15rpx;">维修方式:</text>
			<picker class="picker-text" mode="selector" :range="repairOptions" @change="onRepairMethodChange">
				{{ repairMethod==="全部"? "全	部": repairMethod }}
			</picker>


		</view>
		<text class="header-text">共{{ repairs.length }}条</text>

		<view class="repair-list">
			<view class="repair-item" v-for="(repair, index) in repairs" :key="index">
				<view class="repair-info">
					<text class="order-number">维修单号：{{ repair.orderNumber }}</text>
					<text class="status-text">{{ repair.status }}</text>
				</view>
				<text class="repair-method">维修方式：{{ repair.method }}</text>
				<view class="appointment-info">
					<text class="date-text">预约日期：{{ repair.date }}</text>
					<view class="button-container">
						<button class="detail-button" @click="xiangqing(index)">查看详情</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniPopup,
		uniDataPicker,
		uniDatetimePicker
	} from '@dcloudio/uni-ui';

	export default {
		components: {
			uniPopup,
			uniDataPicker,
			uniDatetimePicker
		},
		data() {
			return {
				statusOptions: ['全部', '进行中', '已完成'],
				repairOptions: ['全部', '到店维修', '上门取车'],
				status: '全部',
				statusIndex: 0,
				repairMethod: '全部',
				repairIndex: 0,
				selectedDate: this.formatDate(new Date()),
				repairs: [{
						orderNumber: '3535252',
						status: '进行中',
						method: '到店维修',
						date: '2022/11/10 11:00'
					},
					{
						orderNumber: '3535252',
						status: '已完成',
						method: '上门取车',
						date: '2022/11/10 11:00'
					},
					{
						orderNumber: '3535252',
						status: '进行中',
						method: '上门取车',
						date: '2022/11/10 11:00'
					},
				]
			};
		},
		methods: {
			// 时间格式化
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 选择状态
			onStatusChange(e) {
				// console.log(e);
				this.status = this.statusOptions[e.detail.value];
				// console.log(this.status);
			},
			//选择维修方式
			onRepairMethodChange(e) {
				// console.log(e);
				this.repairMethod = this.repairOptions[e.detail.value];
				console.log(this.repairMethod);

			},
			//选择时间
			onDateChange(e) {
				console.log(e);
				this.selectedDate = e.detail.value;
			},
			//跳转详情
			xiangqing(index) {
				console.log(index);
				const repairs = this.repairs;
				const repair = repairs[index];
				const repairJson = encodeURIComponent(JSON.stringify(repair)); // 将对象转换为 JSON 字符串并进行 URL 编码
				uni.navigateTo({
					url: `/pages/syx-WeiXiuRenWu/xiangqing/xiangqing?repair=${repairJson}`
				});
			},
			//发送get请求
			// request() {
			// 	const status = this.status;
			// 	const method = this.repairMethod;
			// 	const time = this.selectedDate;
			// 	uni.request({
			// 		url: `?status=${status}&repairMethod=${method}&yuyueshijian=${time}`
			// 	})
			// },

		},
		mounted() {}
	};
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #f5f7fa;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #333;
		overflow: hidden;
		white-space: nowrap;
	}

	.header-text {
		margin-right: 5rpx;
	}

	.picker-text {
		padding: 5rpx 10rpx;
		border: 1rpx solid #4a90e2;
		border-radius: 5rpx;
		background-color: #ffffff;
		margin-right: 5rpx;

	}

	.repair-list {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.repair-item {
		padding: 20rpx;
		border: 1rpx solid #e1e1e1;
		background-color: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
	}

	.repair-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.order-number {
		font-weight: bold;
	}

	.status-text {
		color: #ff7f50;
	}

	.repair-method {
		color: #333;
	}

	.appointment-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.date-text {
		color: #999;
	}

	.button-container {
		display: flex;
		justify-content: flex-end;
	}

	.detail-button {
		padding: 4rpx 8rpx;
		font-size: 24rpx;
		background-color: #4a90e2;
		color: white;
		border: none;
		border-radius: 5rpx;
		transition: background-color 0.3s;
	}

	.detail-button:hover {
		background-color: #357ab8;
	}
</style>